<template>
    <div class="service">
        <div class="start">
            <h2>服务项目</h2>
            <div class="lineHei"></div>
            <p>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</p>
        </div>
        <div class="building">
            <!--        网站建设-->
            <div class="htmlW">
                <h3>网站建设</h3>
                <p>企业网站、购物商城、行业门户、社区论坛、政府/事业单位等网站定制开发！</p>
                <div class="buildingUl">
                    <div class="buildingData" v-for="(item,index) in contentOne" :key="index">
                        <div class="title">{{item.title}}</div>
                        <div class="imgDiv">
                            <img :src="item.imgUrl" alt="" height="45px" width="45px">
                        </div>
                        <p>{{item.text}}</p>
                    </div>
                </div>
            </div>
            <!--        移动端APP-->
            <div class="mobileApp">
                <h3>移动端/APP</h3>
                <p>手机网站、原生APP、API开发、H5单页等移动终端产品定制开发！</p>
                <div class="buildingUl">
                    <div class="buildingData" v-for="(item,index) in contentTwo" :key="index">
                        <div class="title">{{item.title}}</div>
                        <div class="imgDiv">
                            <img :src="item.imgUrl" alt="" height="45px" width="45px">
                        </div>
                        <p>{{item.text}}</p>
                    </div>
                </div>
            </div>
<!--            微信小程序-->
            <div class="wxApp">
                <h3>微信/小程序</h3>
                <p>基于微信/小程序模板消息、微信支付等开放组件及接口开发各类微信场景应用！</p>
                <div class="buildingUl">
                    <div class="buildingData" v-for="(item,index) in contentOne" :key="index">
                        <div class="title">{{item.title}}</div>
                        <div class="imgDiv">
                            <img :src="item.imgUrl" alt="" height="45px" width="45px">
                        </div>
                        <p>{{item.text}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="chooseMe">
            <div class="chooseTitle">这也许是您即将选择我们的理由</div>
            <p class="choseText">纵然我们已经拥有无数让您选择的理由，但我们看不上你</p>
            <div class="ulChoose">
                <div class="choose" v-for="(item,index) in contentChoose" :key="index" @mouseover="chooseLine($event.currentTarget )" @mouseout="chooseOut($event.currentTarget )">
                    <div class="shang" >
                        <img :src="item.imgUrl" alt="">
                        <div class="rightChoose">
                            <p>{{item.title}}</p>
                            <div class="lineChoose"></div>
                        </div>
                    </div>
                    <div class="xia">{{item.text}}</div>
                </div>
            </div>
        </div>
        <question-ask/>
    </div>
</template>

<script>
    export default {
        name: "service",
        components:{
            questionAsk:()=>import('../../components/question/question')
        },
        data(){
            return{
                contentOne:[
                    {
                        imgUrl:require('../../assets/service/gw.png'),
                        title:"企业网站",
                        text:"企业门户官网/企业营销型网站定制开发、设计、建设"
                    },
                    {
                        imgUrl:require('../../assets/service/ly-jf.png'),
                        title:"行业门户",
                        text:"垂直行业综合门户开发，资讯、交易、分类信息、下载等"
                    },
                    {
                        imgUrl:require('../../assets/service/shop.png'),
                        title:"购物商场",
                        text:"单/多用户商城、订单、支付、提现、财务管理"
                    },
                    {
                        imgUrl:require('../../assets/service/bbs.png'),
                        title:"社区论坛",
                        text:"会员管理及分级权限、板块分级及权限、帖子管理"
                    },
                    {
                        imgUrl:require('../../assets/service/gov.png'),
                        title:"政府官网",
                        text:"政府机构信息化建设，便民服务窗口，安全稳定"
                    },
                    {
                        imgUrl:require('../../assets/service/gw.png'),
                        title:"活动官网",
                        text:"活动官方网站，信息发布、投票、报名、评比等"
                    },
                    {
                        imgUrl:require('../../assets/service/o2o.png'),
                        title:"O2O系统",
                        text:"商家入驻、LBS定位、商品、附近商家、购物车、会员管理"
                    },
                    {
                        imgUrl:require('../../assets/service/global.png'),
                        title:"外贸网站",
                        text:"企业出海必备，多语言，针对Google针对性优化"
                    },

                ],
                contentTwo:[
                    {
                        imgUrl:require('../../assets/service/gw.png'),
                        title:'手机网站',
                        text:'可以在手机浏览器、微信、独立APP等各种环境浏览的网站'
                    },
                    {
                        imgUrl:require('../../assets/service/ios.png'),
                        title:'APP开发',
                        text:'IOS和安卓两大主流平台的移动APP客户端开发'
                    },
                    {
                        imgUrl:require('../../assets/service/ly-aq.png'),
                        title:'API开发',
                        text:'APP及网站服务端开发，提供规范的API技术文档'
                    },
                    {
                        imgUrl:require('../../assets/service/h5.png'),
                        title:'H5表单',
                        text:'提供活动、报名、招聘等形式的H5高逼格单页开发'
                    },
                ],
                contentChoose:[
                    {
                        imgUrl:require('../../assets/service/ly-dz.png'),
                        title:'个性定制',
                        text:'您的想法加上我们的专业技术及服务能力产出您想想要的产品,绝非生搬硬套式开发。',
                    },
                    {
                        imgUrl:require('../../assets/service/ly-gf.png'),
                        title:'开发规范',
                        text:'采用SVN/GIT等工具进行代码版本控制可以溯源代码历史，技术文档更加规范。',
                    },
                    {
                        imgUrl:require('../../assets/service/ly-js.png'),
                        title:'极速响应',
                        text:'不管项目开发中，还是售后维护阶段；工程师快速响应，紧急问题下班时间照常响应。',
                    },
                    {
                        imgUrl:require('../../assets/service/ly-aq.png'),
                        title:'安全稳定',
                        text:'实时监测服务器集群运行状态、资源占用率；程序自动进行数据库数据备份。',
                    },
                    {
                        imgUrl:require('../../assets/service/ly-jf.png'),
                        title:'完整交付',
                        text:'域名/空间/备案等账号、源代码、技术文档等所有的输出物全部交付给甲方。',
                    },
                    {
                        imgUrl:require('../../assets/service/ly-sh.png'),
                        title:'完整售后',
                        text:'不少于一年售后服务期，包含故障修复、备案、备份、安全防护、问题咨询等。',
                    },

                ]
            }
        },
        methods:{
            chooseLine(event){
                    event.querySelector('.lineChoose').style.width='60px';
                // console.log(event)
            },
            chooseOut(event){
                    event.querySelector('.lineChoose').style.width='30px';
            }
        }

    }
</script>

<style lang="less" scoped>
    .service{
        width: 100%;
        box-sizing: border-box;
        min-width: 1400px;
        .start{
            height: 400px;
            padding: 150px 170px;
            box-sizing: border-box;
            background: url("../../assets/service/service.jpg") no-repeat;
            background-size: 100% 100%;
            h2{
                font-size: 30px;
                font-weight: 500;
                color: white;
                margin-bottom: 15px;
            }
            .lineHei{
                height: 2px;
                width: 80px;
                background: #0595C7;
            }
            p{
                font-size: 15px;
                color: white;
                opacity: .8;

            }
        }
        .building{
            padding: 100px 200px;
            width: 100%;
            min-width: 1300px;
            box-sizing: border-box;
            h3{
                text-align: center;
                font-size: 30px;
                font-weight: 400;
                margin: 0;
            }
            p{
                text-align: center;
                color: #aaaaaa;
            }
            .buildingUl{
                width: 100%;
                box-sizing: border-box;
                overflow: auto;
                margin-top: 45px;
                margin-bottom: 100px;

                .buildingData{
                    width: 25%;
                    float: left;
                    box-sizing: border-box;
                    border: 1px solid #cccccc;
                    /*margin-left: -1px;*/
                    .title{
                        text-align: center;
                        margin-top: 15px;
                        font-size: 18px;
                        color: #666666;
                    }
                    .imgDiv{
                        padding: 15px;
                        img{
                            display: block;
                            margin: 0 auto;
                        }
                    }
                    p{
                        color: #aaaaaa;
                        margin-top: 0;
                        padding: 0 30px;
                        box-sizing: border-box;
                        font-size: 13px;
                        text-align: center;
                    }
                }
            }
        }
        .chooseMe{
            height: 550px;
            width: 100%;
            background: #303449;
            box-sizing: border-box;
            padding: 100px 200px;
            .chooseTitle{
                text-align: center;
                color: white;
                font-size: 30px;
                font-weight: 500;
                letter-spacing: 5px;
            }
            .choseText{
                color: #aaaaaa;
                text-align: center;
            }
            .ulChoose{
                width: 100%;
                margin-top: 50px;
                .choose{
                    float: left;
                    width: 33%;
                    box-sizing: border-box;
                    margin-bottom: 30px;
                    cursor: pointer;

                    .shang{
                        width: 100%;
                        img{
                            float: left;
                            height: 30px;
                            width: 30px;
                            margin-right: 10px;
                        }
                        .rightChoose{
                            float: left;
                            height: 30px;
                            p{
                                width: 100%;
                                /*display: block;*/
                                margin: 10px 0;
                                color: white;
                                font-size: 15px;
                                font-weight: 500;
                                /*margin-bottom: 5px;*/
                            }
                            .lineChoose{
                                height: 2px;
                                background: #0595C7;
                                width: 30px;
                                transition: .3s ease-in-out;

                            }
                        }
                    }
                    .xia{
                        float: left;
                        color: #aaaaaa;
                        font-size: 13px;
                        font-weight: 300;
                        box-sizing: border-box;
                        padding: 20px 40px;
                    }
                }
            }
        }
    }

</style>
